<template>
  <!-- vp-raw的作用是隔绝vitepress样式对当前组件的样式影响 -->
  <div class="vp-raw" style="height: 560px">
    <div class="custom-antd-table-wrapper h-full">
      <a-table
        :columns="columns"
        :data-source="data"
        :scroll="{ x: 'max-content', y: 'max-content',hideOnSinglePage:true }"
      >
        <!-- 自定义表头 -->
        <template #headerCell="{ column }">
          <template v-if="column.key === 'name'">
            <span>
              <smile-outlined />
              {{ column.title }}
            </span>
          </template>
        </template>

        <!-- 自定义单元格 -->
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <a>
              {{ record.name }}
            </a>
          </template>
          <template v-else-if="column.key === 'tags'">
            <span>
              <a-tag
                v-for="tag in record.tags"
                :key="tag"
                :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
              >
                {{ tag.toUpperCase() }}
              </a-tag>
            </span>
          </template>
          <template v-else-if="column.key === 'action'">
            <span>
              <a>Invite 一 {{ record.name }}</a>
              <a-divider type="vertical" />
              <a>Delete</a>
              <a-divider type="vertical" />
              <a class="ant-dropdown-link">
                More actions
                <down-outlined />
              </a>
            </span>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue'
import type { TableColumnType } from 'ant-design-vue'

interface UserInfo {
  key: string
  name: string
  age: number
  address: string
  tags: string[]
}
const columns: TableColumnType<UserInfo>[] = [
  {
    title: '姓名',
    dataIndex: 'name',
    width: 200,
    key: 'name',
    customCell: () => {
      return {
        style: {
          color: 'red',
        },
        onClick: event => {
          alert(123)
        },
      }
    },
  },
  {
    title: '年龄',
    dataIndex: 'age',
    width: 200,
    key: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
    width: 100,
    ellipsis: true,
  },
  {
    title: '标签',
    dataIndex: 'tags',
    key: 'tags',
    width: 200,
  },
  {
    title: '动作',
    key: 'action',
    width: 200,
  },
]

const data: UserInfo[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '4',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '5',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '6',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '7',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '8',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '9',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
]
</script>
<style scoped lang="less">
.custom-antd-table-wrapper {
  ::v-deep(.ant-table-wrapper) {
    height: 100%;
    .ant-spin-nested-loading {
      height: 100%;
    }
    .ant-spin-container {
      height: 100%;
      display: flex;
      flex-direction: column;
      .ant-table {
        flex: 1;
        height: 0;
      }
      .ant-pagination {
        flex-shrink: 0;
      }
    }
    .ant-table-container {
      height: 100%;
      display: flex;
      flex-direction: column;
      > .ant-table-header {
        flex-shrink: 0;
      }
      > .ant-table-body {
        flex: 1;
        height: 0;
      }
    }
  }
}
</style>
